<template>
  <div class="right-box">
    <div class="right-top">
      <Superscript :title="titleList[0]"></Superscript>
      <div class="right-top-box">
        <div class="average">
          <img class="average-icon" src="http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/average-pay.png"/>
          <div class="average-content">
            <count id="average-pay" size="big" :endVal="averagePay" :decimals="2"></count>
            <div class="des">人均支付笔数</div>
          </div>
        </div>
        <PayCountRosePie id="average-pay-pie" class="average-pay-pie"></PayCountRosePie>
      </div>
    </div>
    <div class="right-bottom">
      <Superscript :title="titleList[1]"></Superscript>
      <div class="right-bottom-box">
        <div class="average">
          <img src="http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/bus-average-pay.png" alt="" class="average-icon">
          <div class="average-content">
            <count id="bus-average-pay" size="big" :endVal="busAveragePay" :decimals="2"></count>
            <div class="des">每辆车平均支付笔数</div>
          </div>
        </div>
        <CityPayBar id="city-pay"></CityPayBar>
        <!--<CityMonthPay id="city-month-pay" class="city-month-pay"></CityMonthPay>-->
        <CityMonthPayBar id="city-month-pay" class="city-month-pay"></CityMonthPayBar>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import { Superscript, count, PayCountRosePie, CityPayBar, CityMonthPayBar, CityMonthPay } from '../../../components'
  export default {
    components: {Superscript, count, PayCountRosePie, CityPayBar, CityMonthPayBar, CityMonthPay},
    data () {
      return {
        titleList: ['人均支付数据', '车/日支付数据'],
      }
    },
    computed: {
      ...mapState(['busAveragePay', 'averagePay'])
    }
  }
</script>
<style lang="stylus" scoped>
  @import './index.styl';
</style>
